<template><div><p>本文档最新版为 <a href="https://learnku.com/docs/laravel/10.x" target="_blank" rel="noopener noreferrer">10.x</a>，旧版本可能放弃维护，推荐阅读最新版！</p>
<h2 id="视图" tabindex="-1"><a class="header-anchor" href="#视图"><span>视图</span></a></h2>
<ul>
<li><a href="#introduction">介绍</a>
<ul>
<li><a href="#writing-views-in-react-or-vue">在 React / Vue 中编写视图</a></li>
</ul>
</li>
<li><a href="#creating-and-rendering-views">创建和渲染视图</a>
<ul>
<li><a href="#nested-view-directories">嵌套视图目录</a></li>
<li><a href="#creating-the-first-available-view">创建第一个可用视图</a></li>
<li><a href="#determining-if-a-view-exists">确定视图是否存在</a></li>
</ul>
</li>
<li><a href="#passing-data-to-views">向视图传递数据</a>
<ul>
<li><a href="#sharing-data-with-all-views">与所有视图共享数据</a></li>
</ul>
</li>
<li><a href="#view-composers">视图组合器</a>
<ul>
<li><a href="#view-creators">视图构造器</a></li>
</ul>
</li>
<li><a href="#optimizing-views">优化视图</a></li>
</ul>
<h2 id="介绍" tabindex="-1"><a class="header-anchor" href="#介绍"><span>介绍</span></a></h2>
<p>当然，直接从路由和控制器返回整个 HTML 文档字符串是不切实际的。值得庆幸的是，视图提供了一种方便的方式来将我们所有的 HTML 放在单独的文件中。</p>
<p>视图将你的控制器 / 应用程序逻辑与你的表示逻辑分开并存储在 <code v-pre>resources/views</code> 目录中。一个简单的视图可能看起来像这样：使用 Laravel 时，视图模板通常使用 <a href="https://learnku.com/docs/laravel/11.x/blademd" target="_blank" rel="noopener noreferrer">Blade 模板语言</a> 编写。一个简单的视图如下所示：</p>
<div class="language-blade line-numbers-mode" data-highlighter="prismjs" data-ext="blade" data-title="blade"><pre v-pre class="language-blade"><code><span class="line">&lt;!-- 视图存储在 resources/views/greeting.blade.php 中 --&gt;</span>
<span class="line"></span>
<span class="line">&lt;html&gt;</span>
<span class="line">    &lt;body&gt;</span>
<span class="line">        &lt;h1&gt;Hello, {{ $name }}&lt;/h1&gt;</span>
<span class="line">    &lt;/body&gt;</span>
<span class="line">&lt;/html&gt;</span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>由于这个视图存储在 <code v-pre>resources/views/greeting.blade.php</code> 中，我们可以使用全局的 <code v-pre>view</code> 辅助函数来返回它，如下所示：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token class-name static-context">Route</span><span class="token operator">::</span><span class="token function">get</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'/'</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line">    <span class="token keyword">return</span> <span class="token function">view</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'greeting'</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token string single-quoted-string">'name'</span> <span class="token operator">=></span> <span class="token string single-quoted-string">'James'</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><blockquote>
<p><strong>技巧</strong><br>
如果你想了解更多关于如何编写 Blade 模板的更多信息？查看完整的 <a href="https://learnku.com/docs/laravel/11.x/blademd" target="_blank" rel="noopener noreferrer">Blade 文档</a> 将是最好的开始。</p>
</blockquote>
<h3 id="在-react-vue-中编写视图" tabindex="-1"><a class="header-anchor" href="#在-react-vue-中编写视图"><span>在 React / Vue 中编写视图</span></a></h3>
<p>许多开发者开始倾向于使用 React 或 Vue 来编写前端模板，而不是通过 Blade 用 PHP 编写。Laravel 通过 <a href="https://inertiajs.com/" target="_blank" rel="noopener noreferrer">Inertia</a> 库使得将 React / Vue 前端与 Laravel 后端连接变得轻而易举，而无需构建 SPA 的典型复杂性。</p>
<p>我们的 Breeze 和 Jetstream <a href="https://learnku.com/docs/laravel/11.x/starter-kitsmd" target="_blank" rel="noopener noreferrer">启动套件</a>为你的下一个由 Inertia 驱动的 Laravel 应用程序提供了很好的起点。此外，<a href="https://bootcamp.laravel.com/" target="_blank" rel="noopener noreferrer">Laravel Bootcamp</a>提供了构建由 Inertia 驱动的 Laravel 应用程序的完整演示，包括 Vue 和 React 的示例。</p>
<h2 id="创建和渲染视图" tabindex="-1"><a class="header-anchor" href="#创建和渲染视图"><span>创建和渲染视图</span></a></h2>
<p>你可以通过在应用程序的 <code v-pre>resources/views</code> 目录中放置一个扩展名为 <code v-pre>.blade.php</code> 的文件来创建一个视图，或者使用 <code v-pre>make:view</code> Artisan 命令来创建视图：</p>
<div class="language-bash line-numbers-mode" data-highlighter="prismjs" data-ext="sh" data-title="sh"><pre v-pre class="language-bash"><code><span class="line">php artisan make:view greeting</span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><p><code v-pre>.blade.php</code>扩展名告知框架该文件包含一个 <a href="https://learnku.com/docs/laravel/11.x/blademd" target="_blank" rel="noopener noreferrer">Blade 模板</a>。Blade 模板包含 HTML 以及 Blade 指令，这些指令允许你轻松地输出值、创建「if」语句、迭代数据等。</p>
<p>一旦创建了视图，你可以使用全局的 <code v-pre>view</code> 辅助函数从应用程序的路由或控制器返回它：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token class-name static-context">Route</span><span class="token operator">::</span><span class="token function">get</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'/'</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line">    <span class="token keyword">return</span> <span class="token function">view</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'greeting'</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token string single-quoted-string">'name'</span> <span class="token operator">=></span> <span class="token string single-quoted-string">'James'</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>也可以使用 <code v-pre>View</code> 门面返回视图：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token keyword">use</span> <span class="token package">Illuminate<span class="token punctuation">\</span>Support<span class="token punctuation">\</span>Facades<span class="token punctuation">\</span>View</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token keyword">return</span> <span class="token class-name static-context">View</span><span class="token operator">::</span><span class="token function">make</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'greeting'</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token string single-quoted-string">'name'</span> <span class="token operator">=></span> <span class="token string single-quoted-string">'James'</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>正如你所见，传递给 <code v-pre>view</code> 辅助函数的第一个参数对应于 <code v-pre>resources/views</code> 目录中视图文件的名称。第二个参数是一个数据数组，这些数据应该提供给视图。在这个例子中，我们传递了 <code v-pre>name</code> 变量，它使用 <a href="https://learnku.com/docs/laravel/11.x/blademd" target="_blank" rel="noopener noreferrer">Blade 语法</a>在视图中显示。</p>
<h3 id="嵌套视图目录" tabindex="-1"><a class="header-anchor" href="#嵌套视图目录"><span>嵌套视图目录</span></a></h3>
<p>视图也可以嵌套在 <code v-pre>resources/views</code> 目录的子目录中。「.」符号可用于引用嵌套视图。 例如，如果你的视图存储在 <code v-pre>resources/views/admin/profile.blade.php</code>， 可以从应用程序的路由或控制器中返回它，如下所示：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line">    <span class="token keyword">return</span> <span class="token function">view</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'admin.profile'</span><span class="token punctuation">,</span> <span class="token variable">$data</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><blockquote>
<p>注意：视图目录名称不应包含该「.」字符。</p>
</blockquote>
<h3 id="创建第一个可用视图" tabindex="-1"><a class="header-anchor" href="#创建第一个可用视图"><span>创建第一个可用视图</span></a></h3>
<p>使用 <code v-pre>View</code> 门面的 <code v-pre>first</code> 方法，你可以创建给定数组视图中第一个存在的视图。如果你的应用程序或包允许自定义或覆盖视图，这可能会很有用：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line">    <span class="token keyword">use</span> <span class="token package">Illuminate<span class="token punctuation">\</span>Support<span class="token punctuation">\</span>Facades<span class="token punctuation">\</span>View</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">    <span class="token keyword">return</span> <span class="token class-name static-context">View</span><span class="token operator">::</span><span class="token function">first</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string single-quoted-string">'custom.admin'</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'admin'</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token variable">$data</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="确定视图是否存在" tabindex="-1"><a class="header-anchor" href="#确定视图是否存在"><span>确定视图是否存在</span></a></h3>
<p>如果你需要确定某个视图是否存在，你可以使用 <code v-pre>View</code> 门面。 如果视图存在，<code v-pre>exists</code> 方法将返回 <code v-pre>true</code>：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line">    <span class="token keyword">use</span> <span class="token package">Illuminate<span class="token punctuation">\</span>Support<span class="token punctuation">\</span>Facades<span class="token punctuation">\</span>View</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">    <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token class-name static-context">View</span><span class="token operator">::</span><span class="token function">exists</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'admin.profile'</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line">        <span class="token comment">// ...</span></span>
<span class="line">    <span class="token punctuation">}</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="向视图传递数据" tabindex="-1"><a class="header-anchor" href="#向视图传递数据"><span>向视图传递数据</span></a></h2>
<p>正如你在前面的示例中所看到的，你可以将数据数组传递给视图，以使该数据可供视图使用：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line">    <span class="token keyword">return</span> <span class="token function">view</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'greetings'</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token string single-quoted-string">'name'</span> <span class="token operator">=></span> <span class="token string single-quoted-string">'Victoria'</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><p>以这种方式传递信息时，数据应该是包含键/值对的数组。向视图提供数据后，你可以使用数据的键访问视图中的每个值，例如： <code v-pre>&lt;?php echo $name; ?&gt;</code>。</p>
<p>作为将完整的数据数组传递给 <code v-pre>view</code> 辅助函数的替代方法，你可以使用该 <code v-pre>with</code> 方法将单个数据添加到视图中。该 <code v-pre>with</code> 方法返回视图对象的实例，以便你可以在返回视图之前继续使用链式调用：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line">    <span class="token keyword">return</span> <span class="token function">view</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'greeting'</span><span class="token punctuation">)</span></span>
<span class="line">                <span class="token operator">-></span><span class="token function">with</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'name'</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'Victoria'</span><span class="token punctuation">)</span></span>
<span class="line">                <span class="token operator">-></span><span class="token function">with</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'occupation'</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'Astronaut'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="与所有视图共享数据" tabindex="-1"><a class="header-anchor" href="#与所有视图共享数据"><span>与所有视图共享数据</span></a></h3>
<p>有时，你可能需要与应用程序呈现的所有视图共享数据。可以使用 <code v-pre>View</code> 门面的 <code v-pre>share</code> 方法来执行此操作。 通常，你应该将对 <code v-pre>share</code> 方法的调用放在服务提供者的 <code v-pre>boot</code> 方法中。 你可以自由地将它们添加到 <code v-pre>App\Providers\AppServiceProvider</code> 类中，或者生成一个单独的服务提供者来容纳它们：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token php language-php"><span class="token delimiter important">&lt;?php</span></span>
<span class="line"></span>
<span class="line"><span class="token keyword">namespace</span> <span class="token package">App<span class="token punctuation">\</span>Providers</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token keyword">use</span> <span class="token package">Illuminate<span class="token punctuation">\</span>Support<span class="token punctuation">\</span>Facades<span class="token punctuation">\</span>View</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token keyword">class</span> <span class="token class-name-definition class-name">AppServiceProvider</span> <span class="token keyword">extends</span> <span class="token class-name">ServiceProvider</span></span>
<span class="line"><span class="token punctuation">{</span></span>
<span class="line">    <span class="token doc-comment comment">/**</span>
<span class="line">     * 注册任何应用服务。</span>
<span class="line">     */</span></span>
<span class="line">    <span class="token keyword">public</span> <span class="token keyword">function</span> <span class="token function-definition function">register</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">:</span> <span class="token keyword return-type">void</span></span>
<span class="line">    <span class="token punctuation">{</span></span>
<span class="line">        <span class="token comment">// ...</span></span>
<span class="line">    <span class="token punctuation">}</span></span>
<span class="line"></span>
<span class="line">    <span class="token doc-comment comment">/**</span>
<span class="line">     * 引导任何应用服务。</span>
<span class="line">     */</span></span>
<span class="line">    <span class="token keyword">public</span> <span class="token keyword">function</span> <span class="token function-definition function">boot</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">:</span> <span class="token keyword return-type">void</span></span>
<span class="line">    <span class="token punctuation">{</span></span>
<span class="line">        <span class="token class-name static-context">View</span><span class="token operator">::</span><span class="token function">share</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'key'</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'value'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">    <span class="token punctuation">}</span></span>
<span class="line"><span class="token punctuation">}</span></span>
<span class="line"></span></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="视图生成器" tabindex="-1"><a class="header-anchor" href="#视图生成器"><span>视图生成器</span></a></h2>
<p>视图编辑器是在渲染视图时调用的回调或类方法。如果每次渲染视图时都要将数据绑定到该视图，则视图编辑器可以帮助你将该逻辑组织到一个位置。如果应用程序中的多个路由或控制器返回了相同的视图，并且始终需要特定的数据，则视图编辑器可能会特别有用。</p>
<p>通常，视图编写器将在应用程序的一个 <a href="https://learnku.com/docs/laravel/11.x/providersmd" target="_blank" rel="noopener noreferrer">服务提供者</a> 中注册。在本例中，我们假设 <code v-pre>App\Providers\AppServiceProvider</code> 将包含此逻辑。</p>
<p>我们将使用 <code v-pre>View</code> 门面的 <code v-pre>composer</code> 方法来注册视图 composer。Laravel不包括基于类的视图编辑器的默认目录，因此你可以随心所欲地组织它们。例如，你可以创建一个 <code v-pre>app/View/Composers</code> 目录来容纳应用程序的所有视图编辑器：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token php language-php"><span class="token delimiter important">&lt;?php</span></span>
<span class="line"></span>
<span class="line"><span class="token keyword">namespace</span> <span class="token package">App<span class="token punctuation">\</span>Providers</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token keyword">use</span> <span class="token package">App<span class="token punctuation">\</span>View<span class="token punctuation">\</span>Composers<span class="token punctuation">\</span>ProfileComposer</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token keyword">use</span> <span class="token package">Illuminate<span class="token punctuation">\</span>Support<span class="token punctuation">\</span>Facades</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token keyword">use</span> <span class="token package">Illuminate<span class="token punctuation">\</span>Support<span class="token punctuation">\</span>ServiceProvider</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token keyword">use</span> <span class="token package">Illuminate<span class="token punctuation">\</span>View<span class="token punctuation">\</span>View</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token keyword">class</span> <span class="token class-name-definition class-name">AppServiceProvider</span> <span class="token keyword">extends</span> <span class="token class-name">ServiceProvider</span></span>
<span class="line"><span class="token punctuation">{</span></span>
<span class="line">    <span class="token doc-comment comment">/**</span>
<span class="line">     * 注册任何应用服务。</span>
<span class="line">     */</span></span>
<span class="line">    <span class="token keyword">public</span> <span class="token keyword">function</span> <span class="token function-definition function">register</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">:</span> <span class="token keyword return-type">void</span></span>
<span class="line">    <span class="token punctuation">{</span></span>
<span class="line">        <span class="token comment">// ...</span></span>
<span class="line">    <span class="token punctuation">}</span></span>
<span class="line"></span>
<span class="line">    <span class="token doc-comment comment">/**</span>
<span class="line">     * 引导任何应用服务。</span>
<span class="line">     */</span></span>
<span class="line">    <span class="token keyword">public</span> <span class="token keyword">function</span> <span class="token function-definition function">boot</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">:</span> <span class="token keyword return-type">void</span></span>
<span class="line">    <span class="token punctuation">{</span></span>
<span class="line">        <span class="token comment">// 基于Composer使用类...</span></span>
<span class="line">        <span class="token class-name class-name-fully-qualified static-context">Facades<span class="token punctuation">\</span>View</span><span class="token operator">::</span><span class="token function">composer</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'profile'</span><span class="token punctuation">,</span> <span class="token class-name static-context">ProfileComposer</span><span class="token operator">::</span><span class="token keyword">class</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">        <span class="token comment">// 基于Composer使用闭包函数...</span></span>
<span class="line">        <span class="token class-name class-name-fully-qualified static-context">Facades<span class="token punctuation">\</span>View</span><span class="token operator">::</span><span class="token function">composer</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'welcome'</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token class-name type-declaration">View</span> <span class="token variable">$view</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line">            <span class="token comment">// ...</span></span>
<span class="line">        <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">        <span class="token class-name class-name-fully-qualified static-context">Facades<span class="token punctuation">\</span>View</span><span class="token operator">::</span><span class="token function">composer</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'dashboard'</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token class-name type-declaration">View</span> <span class="token variable">$view</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line">            <span class="token comment">// ...</span></span>
<span class="line">        <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">    <span class="token punctuation">}</span></span>
<span class="line"><span class="token punctuation">}</span></span>
<span class="line"></span></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>现在我们已经注册了 <code v-pre>composer</code>，每次渲染 <code v-pre>profile</code> 视图时，都会执行 <code v-pre>App\View\Composers\ProfileComposer</code> 类的 <code v-pre>compose</code> 方法。让我们看一下视图合成器类的例子：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token php language-php"><span class="token delimiter important">&lt;?php</span></span>
<span class="line"></span>
<span class="line"><span class="token keyword">namespace</span> <span class="token package">App<span class="token punctuation">\</span>View<span class="token punctuation">\</span>Composers</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token keyword">use</span> <span class="token package">App<span class="token punctuation">\</span>Repositories<span class="token punctuation">\</span>UserRepository</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token keyword">use</span> <span class="token package">Illuminate<span class="token punctuation">\</span>View<span class="token punctuation">\</span>View</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token keyword">class</span> <span class="token class-name-definition class-name">ProfileComposer</span></span>
<span class="line"><span class="token punctuation">{</span></span>
<span class="line">    <span class="token doc-comment comment">/**</span>
<span class="line">     * 创建新的配置文件合成器。</span>
<span class="line">     */</span></span>
<span class="line">    <span class="token keyword">public</span> <span class="token keyword">function</span> <span class="token function-definition function">__construct</span><span class="token punctuation">(</span></span>
<span class="line">        <span class="token keyword">protected</span> <span class="token class-name type-declaration">UserRepository</span> <span class="token variable">$users</span><span class="token punctuation">,</span></span>
<span class="line">    <span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token punctuation">}</span></span>
<span class="line"></span>
<span class="line">    <span class="token doc-comment comment">/**</span>
<span class="line">     * 将数据绑定到视图。</span>
<span class="line">     */</span></span>
<span class="line">    <span class="token keyword">public</span> <span class="token keyword">function</span> <span class="token function-definition function">compose</span><span class="token punctuation">(</span><span class="token class-name type-declaration">View</span> <span class="token variable">$view</span><span class="token punctuation">)</span><span class="token punctuation">:</span> <span class="token keyword return-type">void</span></span>
<span class="line">    <span class="token punctuation">{</span></span>
<span class="line">        <span class="token variable">$view</span><span class="token operator">-></span><span class="token function">with</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'count'</span><span class="token punctuation">,</span> <span class="token variable">$this</span><span class="token operator">-></span><span class="token property">users</span><span class="token operator">-></span><span class="token function">count</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">    <span class="token punctuation">}</span></span>
<span class="line"><span class="token punctuation">}</span></span>
<span class="line"></span></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>如上所示，所有的视图合成器都会通过 <a href="https://learnku.com/docs/laravel/11.x/containermd" target="_blank" rel="noopener noreferrer">服务容器</a> 进行解析, 因此你可以在视图合成器的构造函数中键入提示所需的任何依赖项。</p>
<h4 id="将视图合成器添加到多个视图" tabindex="-1"><a class="header-anchor" href="#将视图合成器添加到多个视图"><span>将视图合成器添加到多个视图</span></a></h4>
<p>通过将视图数组作为第一个参数传递给 <code v-pre>composer</code> 方法，可以一次添加多个视图到视图合成器中：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token keyword">use</span> <span class="token package">App<span class="token punctuation">\</span>Views<span class="token punctuation">\</span>Composers<span class="token punctuation">\</span>MultiComposer</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token keyword">use</span> <span class="token package">Illuminate<span class="token punctuation">\</span>Support<span class="token punctuation">\</span>Facades<span class="token punctuation">\</span>View</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token class-name static-context">View</span><span class="token operator">::</span><span class="token function">composer</span><span class="token punctuation">(</span></span>
<span class="line">    <span class="token punctuation">[</span><span class="token string single-quoted-string">'profile'</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'dashboard'</span><span class="token punctuation">]</span><span class="token punctuation">,</span></span>
<span class="line">    <span class="token class-name static-context">MultiComposer</span><span class="token operator">::</span><span class="token keyword">class</span></span>
<span class="line"><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>该 <code v-pre>composer</code> 方法同时也接受通配符 <code v-pre>*</code>，表示将所有视图添加到视图合成器中:</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token keyword">use</span> <span class="token package">Illuminate<span class="token punctuation">\</span>Support<span class="token punctuation">\</span>Facades</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token keyword">use</span> <span class="token package">Illuminate<span class="token punctuation">\</span>View<span class="token punctuation">\</span>View</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token class-name class-name-fully-qualified static-context">Facades<span class="token punctuation">\</span>View</span><span class="token operator">::</span><span class="token function">composer</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'*'</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token class-name type-declaration">View</span> <span class="token variable">$view</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line">    <span class="token comment">// ...</span></span>
<span class="line"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="视图构造器" tabindex="-1"><a class="header-anchor" href="#视图构造器"><span>视图构造器</span></a></h3>
<p>视图构造器「creators」和视图合成器非常相似。唯一不同之处在于视图构造器在视图实例化之后执行，而视图合成器在视图即将渲染时执行。使用 <code v-pre>creator</code> 方法注册视图构造器:</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token keyword">use</span> <span class="token package">App<span class="token punctuation">\</span>View<span class="token punctuation">\</span>Creators<span class="token punctuation">\</span>ProfileCreator</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token keyword">use</span> <span class="token package">Illuminate<span class="token punctuation">\</span>Support<span class="token punctuation">\</span>Facades<span class="token punctuation">\</span>View</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token class-name static-context">View</span><span class="token operator">::</span><span class="token function">creator</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'profile'</span><span class="token punctuation">,</span> <span class="token class-name static-context">ProfileCreator</span><span class="token operator">::</span><span class="token keyword">class</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>现在我们已经注册了composer，每次呈现 <code v-pre>profile</code> 视图时，都会执行 <code v-pre>App\View\Composers\ProfileComposer</code> 类的 <code v-pre>compose</code> 方法。让我们来看看 composer 类的一个例子：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token php language-php"><span class="token delimiter important">&lt;?php</span></span>
<span class="line"></span>
<span class="line"><span class="token keyword">namespace</span> <span class="token package">App<span class="token punctuation">\</span>View<span class="token punctuation">\</span>Composers</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token keyword">use</span> <span class="token package">App<span class="token punctuation">\</span>Repositories<span class="token punctuation">\</span>UserRepository</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token keyword">use</span> <span class="token package">Illuminate<span class="token punctuation">\</span>View<span class="token punctuation">\</span>View</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token keyword">class</span> <span class="token class-name-definition class-name">ProfileComposer</span></span>
<span class="line"><span class="token punctuation">{</span></span>
<span class="line">    <span class="token doc-comment comment">/**</span>
<span class="line">     * 创建一个新的配置文件编辑器。</span>
<span class="line">     */</span></span>
<span class="line">    <span class="token keyword">public</span> <span class="token keyword">function</span> <span class="token function-definition function">__construct</span><span class="token punctuation">(</span></span>
<span class="line">        <span class="token keyword">protected</span> <span class="token class-name type-declaration">UserRepository</span> <span class="token variable">$users</span><span class="token punctuation">,</span></span>
<span class="line">    <span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token punctuation">}</span></span>
<span class="line"></span>
<span class="line">    <span class="token doc-comment comment">/**</span>
<span class="line">     * 将数据绑定到视图。</span>
<span class="line">     */</span></span>
<span class="line">    <span class="token keyword">public</span> <span class="token keyword">function</span> <span class="token function-definition function">compose</span><span class="token punctuation">(</span><span class="token class-name type-declaration">View</span> <span class="token variable">$view</span><span class="token punctuation">)</span><span class="token punctuation">:</span> <span class="token keyword return-type">void</span></span>
<span class="line">    <span class="token punctuation">{</span></span>
<span class="line">        <span class="token variable">$view</span><span class="token operator">-></span><span class="token function">with</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'count'</span><span class="token punctuation">,</span> <span class="token variable">$this</span><span class="token operator">-></span><span class="token property">users</span><span class="token operator">-></span><span class="token function">count</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">    <span class="token punctuation">}</span></span>
<span class="line"><span class="token punctuation">}</span></span>
<span class="line"></span></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>正如你所看到的，所有视图组合器都是通过 <a href="https://learnku.com/docs/laravel/11.x/containermd" target="_blank" rel="noopener noreferrer">服务容器</a> 解析的，因此你可以在组合器的构造函数中键入hint所需的任何依赖项。</p>
<h4 id="将生成器附着到多个视图" tabindex="-1"><a class="header-anchor" href="#将生成器附着到多个视图"><span>将生成器附着到多个视图</span></a></h4>
<p>通过将视图数组作为第一个参数传递给 <code v-pre>composer</code> 方法，可以将一个视图 composer 同时附加到多个视图：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token keyword">use</span> <span class="token package">App<span class="token punctuation">\</span>Views<span class="token punctuation">\</span>Composers<span class="token punctuation">\</span>MultiComposer</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token keyword">use</span> <span class="token package">Illuminate<span class="token punctuation">\</span>Support<span class="token punctuation">\</span>Facades<span class="token punctuation">\</span>View</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token class-name static-context">View</span><span class="token operator">::</span><span class="token function">composer</span><span class="token punctuation">(</span></span>
<span class="line">    <span class="token punctuation">[</span><span class="token string single-quoted-string">'profile'</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'dashboard'</span><span class="token punctuation">]</span><span class="token punctuation">,</span></span>
<span class="line">    <span class="token class-name static-context">MultiComposer</span><span class="token operator">::</span><span class="token keyword">class</span></span>
<span class="line"><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><code v-pre>composer</code> 方法还接受 <code v-pre>*</code> 字符作为通配符，允许你将 composer 附加到所有视图：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token keyword">use</span> <span class="token package">Illuminate<span class="token punctuation">\</span>Support<span class="token punctuation">\</span>Facades</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token keyword">use</span> <span class="token package">Illuminate<span class="token punctuation">\</span>View<span class="token punctuation">\</span>View</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token class-name class-name-fully-qualified static-context">Facades<span class="token punctuation">\</span>View</span><span class="token operator">::</span><span class="token function">composer</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'*'</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token class-name type-declaration">View</span> <span class="token variable">$view</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line">    <span class="token comment">// ...</span></span>
<span class="line"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="查看创建者" tabindex="-1"><a class="header-anchor" href="#查看创建者"><span>查看创建者</span></a></h3>
<p>视图创建者「creators」与 composers 非常相似；但是，它们是在视图实例化后立即执行的，而不是等到视图即将渲染时才执行。要注册视图创建者，请使用 <code v-pre>creator</code> 方法：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token keyword">use</span> <span class="token package">App<span class="token punctuation">\</span>View<span class="token punctuation">\</span>Creators<span class="token punctuation">\</span>ProfileCreator</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token keyword">use</span> <span class="token package">Illuminate<span class="token punctuation">\</span>Support<span class="token punctuation">\</span>Facades<span class="token punctuation">\</span>View</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token class-name static-context">View</span><span class="token operator">::</span><span class="token function">creator</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'profile'</span><span class="token punctuation">,</span> <span class="token class-name static-context">ProfileCreator</span><span class="token operator">::</span><span class="token keyword">class</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="优化视图" tabindex="-1"><a class="header-anchor" href="#优化视图"><span>优化视图</span></a></h2>
<p>默认情况下，Blade 模板视图是按需编译的。当执行渲染视图的请求时，Laravel 将确定视图的编译版本是否存在。如果文件存在，Laravel 将检测未编译的视图相较已编译的视图最近是否有修改。如果编译后的视图不存在，或者未编译的视图已被修改，Laravel 将重新编译该视图。</p>
<p>在请求期间编译视图可能会对性能产生小的负面影响，因此 Laravel 提供了 <code v-pre>view:cache</code> Artisan 命令来预编译应用程序使用的所有视图。为了提高性能，你可能希望在部署过程中运行此命令：</p>
<div class="language-bash line-numbers-mode" data-highlighter="prismjs" data-ext="sh" data-title="sh"><pre v-pre class="language-bash"><code><span class="line">php artisan view:cache</span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><p>你可以使用 <code v-pre>view:clear</code> 命令清除视图缓存：</p>
<div class="language-bash line-numbers-mode" data-highlighter="prismjs" data-ext="sh" data-title="sh"><pre v-pre class="language-bash"><code><span class="line">php artisan view:clear</span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><blockquote>
<p>本译文仅用于学习和交流目的，转载请务必注明文章译者、出处、和本文链接<br>
我们的翻译工作遵照 <a href="https://learnku.com/docs/guide/cc4.0/6589" target="_blank" rel="noopener noreferrer">CC 协议</a>，如果我们的工作有侵犯到您的权益，请及时联系我们。</p>
</blockquote>
<hr>
<blockquote>
<p>原文地址：<a href="https://learnku.com/docs/laravel/11.x/viewsmd/16663" target="_blank" rel="noopener noreferrer">https://learnku.com/docs/laravel/11.x/vi...</a></p>
<p>译文地址：<a href="https://learnku.com/docs/laravel/11.x/viewsmd/16663" target="_blank" rel="noopener noreferrer">https://learnku.com/docs/laravel/11.x/vi...</a></p>
</blockquote>
</div></template>


